<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"/>
<title>yobot登录</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script> 
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/index.js"></script> 
<script src="{{ url_for('yobot_static', filename='password.js') }}"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/theme-chalk/index.css">
<style>
#app {
  margin: auto;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  max-width: 400px;
}
.comment {
  color: #aaa;
  line-height: 20px;
  font-size: 0.8em;
  margin: 20px 0;
}
</style>
</head>

<body>
<div id="app" class="container">
  <div class="container">
    <h1>登录</h1>
    {% if reason -%}
    <el-alert title="{{ reason }}"
                      type="error"> </el-alert>
    {% endif -%}
    {% if advice -%}
    <el-alert title="{{ advice }}"
                      type="info"> </el-alert>
    {% endif -%}
    <div style="margin: 20px;"></div>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="QQ号" prop="qq">
        <el-input v-model="form.qq" name="user" placeholder="请输入登录QQ号" @keyup.enter.native="onSubmit"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input v-model="form.pwd" name="password" placeholder="这个密码不是QQ密码" type="password" @keyup.enter.native="onSubmit"></el-input>
      </el-form-item>
      <p class="comment">* 如果不知道密码，您可以私聊机器人“{{ prefix }}登录”或“{{ prefix }}重置密码”</p>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
  <footer style="text-align: center"> powered by <a href="https://github.com/pcrbot/yobot">yobot</a> </footer>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            form: {
                qq: "",
                pwd: ""
            },
            rules: {
                qq: [
                    {required: true, message: '必须输入您的QQ号', trigger: 'blur'}
                ],
                pwd: [
                    {required: true, message: '必须输入您的密码', trigger: 'blur'},
                ],
            }
        },
        methods() {
            if (localStorage.login_qqid) {
                this.form.qq = String(localStorage.login_qqid);
            }
        },
        methods: {
            post: function (url, params) {
                //创建form表单
                const temp_form = document.createElement("form");
                temp_form.action = url;
                //如需打开新窗口，form的target属性要设置为'_blank'
                // temp_form.target = "_blank";
                temp_form.method = "post";
                temp_form.style.display = "none";
                //添加参数
                for (const key in params) {
                    const opt = document.createElement("textarea");
                    opt.name = key;
                    opt.value = params[key];
                    temp_form.appendChild(opt);
                }
                document.body.appendChild(temp_form);
                //提交数据
                temp_form.submit();
            },
            onSubmit: function () {
                localStorage.login_qqid = this.form.qq;
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        const url = "{{ url_for('yobot_login') }}";
                        this.post(url, {
                            qqid: this.form.qq,
                            pwd: getHashWithSalt(this.form.pwd + this.form.qq)
                        });
                    } else {
                        console.log('请检查输入！');
                        return false;
                    }
                });
            }
        }
    })
</script>
</body>
</html>